<template>
  <div>
      <span>count1值：{{count1}}</span> 
      <button @click="increat1">count1新增</button><br/>
      <span>count2值：{{count2}}</span> 
      <button @click="multiply1">count2乘2</button><br/>
      <p>==============================</p>
      <span>num1值：{{num1}}</span> 
      <button @click="increatNum1">num1新增</button><br/>
      <span>num2值：{{num2}}</span> 
      <button @click="multiplyNum2">num2乘2</button><br/>
  </div>
</template>

<script>
/* =======watch的学习======== */
import {ref,reactive,toRefs,watch} from "vue"
export default {
setup() {

    let count1 = ref(0)
    let count2 = ref(1)
    const increat1 = ()=>{
        count1.value += 1
        console.log("新增....")
    }

    const multiply1 = ()=>{
        count2.value *= 2
        console.log("乘以2....")
    }

    // 监听一个值 ref
    watch(count1,(newVal,oldVal)=> {
        console.log('newVal:',newVal)
        console.log('oldVal:',oldVal)
    })

    // 监听多个值 ref
    watch([count1,count2],(newVal,oldVal)=> {
        console.log("ref监听多个值newVal:",newVal)
        console.log("ref监听多个值oldVal:",oldVal)
    })

    const data = reactive({
        num1: 0,
        num2: 1,
        increatNum1: ()=> {data.num1 +=1},
        multiplyNum2: ()=> {data.num2 *=2},
    })
    const refsData = toRefs(data)

    // 监听一个reactive的字段值
    watch(()=>data.num1,(newVal,oldVal)=> {
        console.log("creative监听一个值newVal:",newVal)
        console.log("creative监听一个值oldVal:",oldVal)
    })

    // 监听多个reactive的字段值
    watch([()=>data.num1,()=>data.num2],(newVal,oldVal)=> {
        console.log("creative监听多个值newVal:",newVal)
        console.log("creative监听多个值oldVal:",oldVal)
    })

    return {
        count1,
        count2,
        increat1,
        multiply1,
        ...refsData
    }

}
}
</script>

<style>

</style>